<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script type="text/javascript"
		src="${facesContext.externalContext.requestContextPath}/js/script_highcharts_report/paymentReportChart.js"></script>
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://code.highcharts.com/stock/highstock.js"></script>
	<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

	<h:inputHidden
		value="#{relatorioPagamentoController.monthToPlotOnChart}"
		id="monthToPlotOnChart" />
	<h:inputHidden value="#{relatorioPagamentoController.dataToChart}"
		id="daysValuesToPlotOnChart" />
		
	<h:inputHidden value="#{relatorioPagamentoController.initialDateToShow}"
				   id="initialDateToShow"/>
	<h:inputHidden value="#{relatorioPagamentoController.endDateToShow}"
				   id="endDateToShow"/>			   
				   

	<div id="content">
		<p:panelGrid columns="4">
			<p:scrollPanel mode="native" style="height:560px">
				<div id="pageTitle">
					<span class="titlePage">RELATÓRIO DE PAGAMENTOS</span>
				</div>

				<!-- Chart -->
				<div id="container"></div>

				<p:dataTable
					value="#{relatorioPagamentoController.reportData.entrySet().toArray()}"
					var="report" id="tablePaymentReport">

					<p:column headerText="Mês/Ano">
						<h:outputText value="#{report.key}"></h:outputText>
					</p:column>

					<p:columns
						value="#{relatorioPagamentoController.titlesOfTheTables}"
						var="columns" columnIndexVar="colIndex">
						<f:facet name="header">
							<h:outputText value="#{columns}"></h:outputText>
						</f:facet>
						<h:outputText
							value="#{report.value.paymentDays.entrySet().toArray()[colIndex].value}" />
					</p:columns>

				</p:dataTable>
			</p:scrollPanel>
		</p:panelGrid>
	</div>
</ui:composition>